<script lang="ts" setup>
import { ref } from 'vue';

const list = ref([{
    name: '新会员',
    count: 10,
}, {
    name: '老会员',
    count: 20,
}])
</script>

<template>
    <umrp-container direction="vertical" :gap="16" height="100%" bg-color="#f2f2f2" padding="16px">
        <umrp-card>
            <umrp-row :gutter="16">
                <umrp-col :span="20">
                    <umrp-form-item label="标签名称">
                        <umrp-input></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="4">
                    <umrp-button type="primary">搜索</umrp-button>
                </umrp-col>
            </umrp-row>
        </umrp-card>
        <umrp-card>
            <umrp-button type="primary" style="margin-bottom: 16px;">新增标签</umrp-button>
            <umrp-table :data="list">
                <template #columns>
                    <umrp-table-column title="标签名称" data-index="name"></umrp-table-column>
                    <umrp-table-column title="标签人数" data-index="count"></umrp-table-column>
                    <umrp-table-column title="操作" slot-name="action"></umrp-table-column>
                </template>
                <template #action>
                    <umrp-space :size="10">
                        <umrp-button type="primary">编辑</umrp-button>
                        <umrp-button type="primary">删除</umrp-button>
                    </umrp-space>
                </template>
            </umrp-table>
        </umrp-card>
    </umrp-container>
</template>